<template>
  <div class="officeBox" id="printBox">
    <img
      v-if="filtCate === 'image'"
      :src="option.url"
      alt=""
      class="img"
      :onerror="onErrorImg"
      :onload="onLoadImg"
    />
    <video
      v-else-if="filtCate === 'video'"
      width="1200"
      height="700"
      autoplay
      controls
      loop
      controlsList="nodownload"
    >
      <source :src="option.url" type="video/mp4" />
      <source :src="option.url" type="video/ogg" />
      Your browser does not support the video tag.
    </video>
    <ViewPDF v-else-if="filtCate === 'pdf'" :pdfUrl="option.url"> </ViewPDF>
    <OnlyOffice
      v-else-if="filtCate === 'office'"
      :option="option"
      :fileObj="fileObj"
    ></OnlyOffice>
    <el-empty v-else description="该文件格式不支持查看"> </el-empty>
    <el-empty v-if="isErrorLoad" description="图片文件加载失败"> </el-empty>
  </div>
</template>

<script setup name="FileViews">
import ViewPDF from '../ViewPDF'
import OnlyOffice from '../OnlyOffice'
import { getFileName } from '@/utils/index'
import { getFileUrl } from '@/api/fileManager'
import allDicts from '@/utils/commonDicts'
const uploadType = ref(allDicts.uploadType)
const route = useRoute()
const props = defineProps({
  fileObj: {
    type: Object,
    default: () => {
      return {}
    },
  },
})
const option = reactive({
  url: '',
  isEdit: false,
  fileType: 'xlsx',
  title: '',
  user: {
    id: 'ceshi',
    name: 'ceshi',
  },
  // 是否可编辑 编辑-edit 预览-false
  mode: 'view',
  editUrl: '',
  key: '',
})

const _fileObj = computed(() => {
  return props.fileObj
})
// 图片文件加载错误
const isErrorLoad = ref(false)
// 设置文档分类（image，pdf，office，video，file）
const filtCate = ref('')
const baseURL = import.meta.env.VITE_APP_BASE_API
const isDev = import.meta.env.VITE_APP_ENV === 'development'
watch(
  _fileObj,
  (val) => {
    // 直接访问文件
    if (val.file) {
      val['path'] = val.file
      option.editUrl = val.file
      option.isEdit = false
      option.mode = 'view'
      setFiltCate(val)
      return
    }
    if (!val.path) {
      return
    }
    // 兼容路由传参和组件传参两种方式
    if (route.query.mode === 'edit' || val.mode === 'edit') {
      getFileUrl({ fileId: val.id })
        .then((res) => {
          let url = getPath(res.data)
          option.editUrl = url
          option.isEdit = true
          option.mode = 'edit'
          setFiltCate(val)
        })
        .catch((err) => {})
    } else {
      option.isEdit = false
      option.editUrl = ''
      option.mode = 'view'
      setFiltCate(val)
    }
  },
  {
    immediate: true,
  }
)

function onLoadImg() {
  isErrorLoad.value = false
}
function onErrorImg() {
  isErrorLoad.value = true
}
function setFiltCate(val) {
  try {
    const ext = getFileName(val.path)
    let url = getPath(val.path)
    option.url = url
    option.title = val.fileName
    option.fileType = ext
    const fileObj = uploadType.value.filter((element) => {
      return element.ext === ext || element.type.indexOf(ext) != -1
    })
    filtCate.value = fileObj[0]?.cate
  } catch (error) {}
}
function getPath(path) {
  let url = path
  let isLocal = isDev
  if (isLocal) {
    url = import.meta.env.VITE_APP_DOCUMENTBASEURL + path
  } else {
    url = window.location.origin + baseURL + path
  }
  return url
}
</script>

<style lang="scss" scoped>
.officeBox {
  height: calc(100vh - 222px);
  text-align: center;
  .img {
    margin-top: 10px;
    max-width: 60%;
  }
}
</style>
